import {Form, Input, Button, Checkbox,message} from 'antd';
import './LoginForm.less'
// import {useQuery} from "react-query";
import {postLogin} from "../../api/login";
import {useDispatch} from "react-redux";
import {editToken} from "../../store/user";
import {useNavigate} from "react-router-dom";
//手机号正则
const phoneReg=/^[1][3,4,5,7,8,9][0-9]{9}$/;

function LoginForm(props) {
     const dispatch=useDispatch()
    const navigate=useNavigate()
    //登录
    const onFinish =  (values) => {
        // console.log( values);
        postLogin({mobile:values.mobile,code:values.code}).then((res)=>{
            console.log(res)
            if (res.message==="OK"){
                dispatch(editToken({token:res.data.token,type:'add'}))
                message.success('登录成功');
                navigate('/')
            }
        })
    };
    return (
       <>
           <Form
               name="normal_login"
               className="login-form"
               size='large'
               initialValues={{
                   mobile:'13911111111',
                   code:'246810',
                   remember: true
               }}
               onFinish={onFinish}
           >
               <Form.Item
                   name="mobile"
                   rules={[
                       () => ({
                           validator(_, value) {
                               // console.log(phoneReg.test(value))
                               if (!!value==false){
                                   return Promise.reject(new Error('请输入手机号!'));
                               }else  if (phoneReg.test(value)) {
                                   return Promise.resolve();
                               }else {
                                       return Promise.reject(new Error('手机号不正确!'));
                               }
                           },
                       }),
                   ]}
               >
                   <Input  placeholder="mobile" />
               </Form.Item>
               <Form.Item
                   name="code"
                   rules={[{ required: true, message: 'Please input your code!' }]}
               >
                   <Input
                       placeholder="code"
                   />
               </Form.Item>
               <Form.Item>
                   <Form.Item name="remember" valuePropName="checked"
                              rules={[
                                  {
                                      validator: (_, value) =>
                                          value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
                                  },
                              ]}
                   >
                       <Checkbox>Remember me</Checkbox>
                   </Form.Item>
               </Form.Item>

               <Form.Item>
                   <Button type="primary" htmlType="submit" className="login-form-button">
                       Log in
                   </Button>
               </Form.Item>
           </Form>
       </>
    );
}

export default LoginForm;
